.avatar {
    position: relative;
    // 鼠标悬浮后ul的dislay属性改为flex
    &:hover {
        ul {
            display: flex;
        }
    }

    img {
        border-radius: 50%;

        &:hover {
            cursor: pointer;
        }
    }

    ul {
        position: absolute;
        right: 0;
        z-index: 8;
        display: none;
        width: 140px;
        flex-direction: column;
        align-items: flex-start;
        background-color: rgba(27, 27, 27, 0.9);

        li {
            &:first-of-type {
                padding-top: 14px;
            }
            width: 100%;
            padding: 10px 15px;

            &:hover {
                background-color: rgb(0, 0, 0);
                cursor: pointer;
            }
            a {
                display: block;
                width: 100%;
                span {
                    font-size: 15px;
                    color: #ececec;
                    &:first-of-type {
                        margin-right: 10px;
                    }
                    &:hover {
                        color: #ffffff;
                    }
                }
            }
        }
    }
}
